<template>
    <div class="container">
        <div class="input-money">
            <!-- <div class="form-item-title">
                <p>低代码字段</p>
            </div> -->
            <div>
                <input :value="formatMoney" @input="inputHandler" placeholder="请输入" />
            </div>
        </div>
        <div class="text" v-if="chineseMoney">{{ chineseMoney }}</div>
    </div>
</template>
  
<script setup>
import { useMoney } from '../../hooks'

const [chineseMoney, formatMoney, inputHandler] = useMoney();

</script>
  
<style scoped>
* {
    margin: 0;
    padding: 0;
}
.container{
    border-bottom: 1px solid #e9e9e9;
}
.input-money {
    user-select: none;
    line-height: 1;
    word-break: break-all;
    margin: 0;
    padding: 0;
    border: 0;
    font-weight: 400;
    vertical-align: baseline;
    display: flex;
    align-items: center;
    justify-content: space-between;
    position: relative;
    min-height: 53px;
}

.form-item-title {
    max-width: 108px;
    font-size: 18px;
    color: #191f25;
    word-break: break-all;
}

input {
    user-select: none;
    word-break: break-all;
    margin: 0;
    font-weight: 400;
    background-color: #FFF;
    box-sizing: border-box;
    display: inline-block;
    outline: 0;
    transition: border-color .2s cubic-bezier(.645, .045, .355, 1);
    width: 100%;
    border: none;
    font-size: 18px;
    color: #191f25;
    text-align: right;
    padding-left: 0.15rem;
}

::placeholder {
    color: #bbb;
}

.text{
    padding-bottom: 5px;
}
</style>
  